<template>
    <div class="tourist">
        <div class="top">
            <p class="title">实时游客统计</p>
            <p class="bg"></p>
            <p class="right">可预约总量<span>90000</span>+</p>
        </div>
        <div class="number">
            <span v-for="(item,index) in touristNum" :key="index">{{ item }}</span>
        </div>
        <!-- echart展示图表 -->
        <div ref="chartRef" class="carts"> </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
const chartRef = ref(null);
// 游客人数
const touristNum = ref('206908人');

onMounted(() => {
    // 生成echart实例
   const MyCharts = echarts.init(chartRef.value)
   
    //    设置配项
    const option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.55, 0.5],
        color: ['#00FFFF', '#29e4e2f5', '#00bfff'],
        itemStyle: {
                opacity: 0.6
        },
        radius: '90%',
        emphasis: {
            itemStyle: {
                opacity: 0.9
            }
        },
        backgroundStyle: {
        color: 'rgb( 17, 20, 78)'
        },
        outline: {
        show: true,
        borderDistance: 8,
        itemStyle: {
            color: 'rgb( 17, 20, 78)',
            borderColor: '#00bfff',
            borderWidth: 8,
            shadowBlur: 0,
            shadowColor: '#fff'
            }
        }
        
    }]
};

    // 设置图表
    MyCharts.setOption(option);

})
</script>

<style scoped lang="scss">
.tourist {
    background-image: url(../images/dataScreen-main-lb.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    .top {
        margin-left: 20px;
        .title {
            color: #fff;
            font-size: 20px;
        }
        .bg {
            background: url(../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
            width: 68px;
            height: 7px;
            margin-top: 10px;
        }
        .right {
            float: right;
            color: #fff;
            font-size: 14px;
            margin-top: 10px;
            span {
                color: #00FFFF;
                font-size: 20px;
                font-weight: 800;
            }
        }
    }
    .number  {
        margin: 0 10px;
        margin-top: 40px;
        display: flex;
        margin-bottom: 10px;
        span{
            height: 40px;
            flex: 1;
            text-align: center;
            line-height: 40px;
            background: url(../images/total.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            color: #00FFFF;
            font-weight: 800;
            font-size: 20px
        }
    }
    .carts {
        width: 100%;
        height: 250px;
    }

}
</style>